<template>
  <div id='tmpl'>
      <div class="descript">
          <div class="title">
              <h3>{{list.title}}</h3>
              <p>
                  <span>发表时间:{{list.add_time | datefmt("YYYY-MM-DD hh:mm:ss")}}</span>
                  <span>{{list.click}}次点击</span>
              </p>
              <p class="line"></p>
          </div>
          <!-- 缩略图 九宫格-->
            <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
                     v-for="(item, index) in imginfoList" :key="index">
                            <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, imginfoList)">
                            
                            <!-- <img :src="item.src" alt=""> -->
                    </li>
                </ul>
		    </div>
          <!-- 摘要 -->
          <p v-html="list.content"></p>
      </div>

  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  name: "component_name",
  data() {
    return {
      id: 0,
      list: [],
      imginfoList: [
        //这里写的对象是preview插件静态写死了而我们要动态生成
        /*  {
          src: 'https://placekitten.com/600/400',
          w: 600,
          h: 400
        }, {
          src: 'https://placekitten.com/1200/900',
          w: 1200,
          h: 900
        } */
      ]
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getimageInfo();
    this.getthumimages();
  },
  methods: {
    getimageInfo() {
      var url = `${this.$common.apidomain}/api/getimageInfo/${this.id}`; //es6写字符串模板
      this.$http.get(url).then(res => {
        //console.log(res);
        var data = res.body;
        if (data.status != 0) {
          Toast(data.message);
          return;
        }
        this.list = data.message[0];
      });
    },
    getthumimages() {
      var url = `${this.$common.apidomain}/api/getthumimages/${this.id}`; //es6写字符串模板
      this.$http.get(url).then(res => {
        console.log(res);
        var data = res.body;
        if (data.status != 0) {
          Toast(data.message);
          return;
        }
        data.message.forEach((ele, index) => {
          //es6的箭头函数代替function(res){}
          var img = document.createElement("img"); //由于本来它默认的数据就是对象里有宽高属性，src属性我们的赋予。所以创建一个img标签
          img.src = ele.src;
          img.onload = function() {
            ele.w = img.width;
            ele.h = img.height;
          };
          // this.$preview.open(index, data.message)
        });
        this.imginfoList = data.message;
      });
    }
  }
};
</script>
<style lang="css" scoped>
.descript {
  padding: 10px;
}
.title h3 {
  color: #0094ff;
}
.title p {
  color: rgba(0, 0, 0, 0.4);
  margin-top: 10px;
}
.title .line {
  border-top: 1px solid #ccc;
}
.mui-content .mui-grid-9 li img {
  display: inline-block;
  width: 100px;
  /* height: 100px; */
}
.mui-grid-view.mui-grid-9 {
  border: 0;
  background-color: #fff;
  margin-top: 0;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: 0;
}
</style>    